
<template style='height:100%;'>
  <el-card>
    <div class="main3">
      <div class="title">欢迎进入河北宏筑建通内部办公平台！</div>
      <div class="m3_con">
        <el-carousel autoplay indicator-position='none' :height="imgHeight+'px'" arrow="always">
          <el-carousel-item  v-for="(item,index) in imgurl" :key="index">
            <img ref="image" src="@/assets/img/hx.png" alt="">
          </el-carousel-item>

        </el-carousel>

      </div>
    </div>
  </el-card>
</template>
<script>
export default {
  data () {
    return {
      imgurl: [`.././assets/img/hx.png`, `.././assets/img/hx.png`],
      imgHeight: ''
    }
  },
  mounted () {
    // this.getImgUrl()
    // 监听窗口变化，使得轮播图高度自适应图片高度
    window.addEventListener('resize', () => {
      this.imgHeight = this.$refs.image[0].height
    })
  },
  methods: {
    imgLoad () {
      this.$nextTick(function () {
        // 获取窗口宽度*图片的比例，定义页面初始的轮播图高度
        this.imgHeight = document.body.clientWidth * 1 / 4
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.el-card {
  .main3 {
    margin: 0 auto;
    .title {
      font-size: 30px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      line-height: 72px;
      text-align: center;
    }
    .m3_con {
      text-align: center;
      margin: 0 auto 20px;
      overflow: hidden;
      width: 100%;
      min-height: 25vh;
      max-height: 30vh;
      img {
        width: 100%;
        max-width: 1500px;
      }
    }
  }
}
</style>
